<template>
  <m-header headeType="home" ref="head_bar" />
  <div class="home">
    <van-tabs v-model:active="tabActive" class="home-tab-list" ref="tab_bar">
      <van-tab
        v-for="(item, index) in tabList"
        :key="index"
        :name="item"
        :title="i18n.$t(item)"
        class="tab-item"
      ></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="Dwnloading" @refresh="onRefresh">
      <div class="data-list" ref="data_list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="-我是有底线的-"
          @load="onLoad"
        >
          <div class="home-list">
            <div v-for="(item, index) in topList" :key="item.uniquekey">
              <div class="top-ske">
                <van-skeleton title :row="3" :loading="skeLoading">
                  <div
                    v-if="item.thumbnail_pic_s03"
                    class="home-item-1"
                    @click="goToDetail(item.uniquekey)"
                  >
                    <p>{{ item.title }}</p>
                    <div class="flex-row">
                      <img :src="item.thumbnail_pic_s" alt="" />
                      <img
                        v-if="item.thumbnail_pic_s02"
                        :src="item.thumbnail_pic_s02"
                        alt=""
                      />
                      <img
                        v-if="item.thumbnail_pic_s03"
                        :src="item.thumbnail_pic_s03"
                        alt=""
                      />
                    </div>
                    <p class="flex-row">
                      <span class="tab-bg-1">{{ item.author_name }}</span>
                      <!-- <span class="tab-bg-2">{{ item.category }}</span> -->
                    </p>
                  </div>
                </van-skeleton>
              </div>

              <van-skeleton title :row="2" :loading="skeLoading">
                <div
                  class="flex home-item-2"
                  @click="goToDetail(item.uniquekey)"
                  v-if="
                    item.thumbnail_pic_s &&
                    (!item.thumbnail_pic_s03 || !item.thumbnail_pic_s02)
                  "
                >
                  <img :src="item.thumbnail_pic_s" alt="" />
                  <p>
                    <span class="home-item-title">{{ item.title }}</span>
                    <span class="tab-bg-1">{{ item.author_name }}</span>
                  </p>
                </div>
              </van-skeleton>
              <van-divider v-if="index + 1 != topList.length" hairline />
            </div>
          </div>
          <!-- <van-cell v-for="item in data.list" :key="item" :title="item" /> -->
        </van-list>
        <div class="no-msg" v-if="noDataActive">
          <van-icon name="description" />
          <p>数据已用光，请明天再试~</p>
        </div>
      </div>
    </van-pull-refresh>
  </div>
  <m-footer :route="childRoute" ref="foot_bar"></m-footer>
</template>

<script lang="ts">
//基础组件
import { ref, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
//业务组件
import { MFooter, MHeader } from '@/components'
//接口
import { getNewsList } from '@/config/api'
//数据
import commonData from '@/data'
import { useI18n } from '@/i18nPlugin'

//弹框组件
import { Toast } from 'vant'

//缓存
import { useStore } from 'vuex'

export default defineComponent({
  nem: 'Home',
  components: {
    MFooter,
    MHeader,
  },
  setup: () => {
    const router = useRouter()
    const store = useStore() // 使用useStore方法
    const loading = ref(false)
    const finished = ref(false)
    // const head_bar = ref(null)
    const data = reactive({
      tabList: commonData.tabList, //tab列表
      homeList: JSON.parse(JSON.stringify(commonData.homeList)), //home数据
      list: [],
      Dwnloading: false, //下拉刷新状态
      tabActive: 'top', //tab值
      skeLoading: true, //骨架站位图状态
      childRoute: 'home', //footer高亮状态
      pageNum: 0,
      topList: [],
      noDataActive: false,
    })
    const i18n = useI18n()
    watch(
      () => data.tabActive,
      (oldValue) => {
        data.pageNum = 0
        let arr = commonData.itemTypes
        let type = ''
        arr.forEach((item: any) => {
          if (item.barType == oldValue) {
            type = item.httpType
          }
        })
        data.list = []
        data.Dwnloading = false
        finished.value = false
        getVuexNewsListFunc(type)
      }
    )
    // watchEffect(()=> {
    //   console.log(data.tabActive)
    // })
    const current: any = ref(0)
    const onChange = (index: number) => {
      current.value = index
    }
    const goToDetail = (id: string) => {
      let obj = {
        key: 'detailBackType',
        value: '/Home',
      }
      store.commit('MUTATIONS_SET_STATE', obj)
      router.replace(`/newsDetail?id=${id}`)
    }
    const onRefresh = () => {
      console.log('下拉刷新')
      setTimeout(() => {
        data.pageNum = 0
        data.Dwnloading = false
        finished.value = false
        let type = ''
        let arr = commonData.itemTypes
        arr.forEach((item: any) => {
          if (item.barType == data.tabActive) {
            type = item.httpType
          }
        })
        getVuexNewsListFunc(type)
      }, 1000)
    }
    const onLoad = () => {
      console.log('上啦加载')
      setTimeout(() => {
        if (data.Dwnloading) {
          data.topList = []
          data.Dwnloading = false
        }
        let type = ''
        let arr = commonData.itemTypes
        arr.forEach((item: any) => {
          if (item.barType == data.tabActive) {
            type = item.httpType
          }
        })
        // console.log(type)
        getVuexNewsListFunc(type)
      }, 1000)
    }
    let getVuexNewsListFunc = (type: string) => {
      data.pageNum++
      let vuex_news_list = store.state.newsList
      let isHttp = true
      // console.log(data.pageNum)
      if (data.pageNum != 1) {
        data.skeLoading = false
      }
      if (vuex_news_list.length > 0) {
        vuex_news_list.forEach((item: any) => {
          if (item.type == type && data.pageNum == item.pageNum) {
            isHttp = false
            if (data.pageNum == 1) {
              data.topList = item.list
              data.skeLoading = false
            } else {
              data.topList = data.topList.concat(item.list)
            }
          }
        })
      }
      if (isHttp) {
        // console.log('获取新数据', data.pageNum)
        if (data.pageNum <= 3) {
          getNewsListFunc(type)
        } else {
          finished.value = true
        }
      } else {
        getVuexDataSend()
      }
    }
    let getVuexDataSend = (/*调取本地数据之后处理下拉组件*/) => {
      // Toast('一大波精彩来袭~')
      loading.value = false
      if (data.topList && data.topList.length >= 30) {
        finished.value = true
      }
    }
    let getNewsListFunc = (type: string) => {
      let req = {
        type,
        page: data.pageNum,
        page_size: 10,
      }
      getNewsList(req).then((res: any) => {
        // Toast('来咯来咯😃')
        console.log(JSON.parse(JSON.stringify(res)))
        if (res.data.length == 10) {
          data.noDataActive = false
          if (data.pageNum == 1) {
            data.topList = res.data
          } else {
            data.topList = data.topList.concat(data.topList)
          }

          loading.value = false
          let vuex_news_obj = {
            type,
            list: res.data,
            pageNum: data.pageNum,
          }
          store.commit('SET_NEWS_LIST', vuex_news_obj)
          if (data.topList.length >= 30) {
            finished.value = true
          }
          data.skeLoading = false //隐藏骨架
          if (data.Dwnloading) {
            //下拉刷新回弹
            data.Dwnloading = false
          }
        } else {
          if (data.pageNum == 1) {
            data.topList = []
            data.noDataActive = true
          } else {
            Toast(res.data + '😟')
            finished.value = false
          }
        }
      })
    }
    onMounted(() => {
      // nextTick(() => {
      // })
      // console.log(store.state)
      // initData();
      // let list = data.homeList.data
      // data.skeLoading = false //隐藏骨架
      // data.topList = list.splice(0, 5)
    })
    return {
      onMounted,
      i18n,
      onLoad,
      onRefresh,
      current,
      onChange,
      goToDetail,
      finished,
      loading,
      ...toRefs(data),
    }
  },
})
</script>

<style scoped lang="scss">
:deep(.van-tab) {
  font-size: 17px;
}
.home {
  padding-top: 40px;
  padding-bottom: 70px;
}
.home-tab-list {
  position: fixed;
  top: 40px;
  height: 35px;
  z-index: 1000;
  width: 100%;
  // border-bottom: 1px solid #f0f0f0;
  // box-shadow: 0 3px 5px #ccc;
  :deep(.van-tab__text) {
    font-size: 14px;
  }
}
:deep(.van-list) {
  margin-top: 40px;
  // padding-top: px;
  // height: 78vh;
  // position: fixed;
  // top: 15vh;
  // overflow: scroll;
  // margin-bottom: 50px;
}
:deep(.van-tabs__wrap) {
  height: 35px !important;
}
:deep(.van-tabs__nav) {
  height: 35px;
  display: flex;
  align-items: center;
  padding-bottom: 0;
  .van-tabs__line {
    bottom: 0;
    height: 1.5px;
    padding: 0 3px;
  }
}
:deep(.van-tab--active) {
  span {
    color: $theme;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
:deep(.van-swipe-item) {
  padding: 15px;
}
.img-item {
  width: 100%;
  border-radius: 5px;
}
.home-list {
  width: 95%;
  margin: 0 auto;
  p {
    font-size: 15px;
    margin: 10px 0 5px 0;
  }
  .home-item-1 {
    div {
      img {
        width: 32.5%;
        height: 80px;
      }
    }
    .tab-bg-1 {
      font-size: 13px;
      color: #ccc;
    }
  }
  .home-item-2 {
    position: relative;
    img {
      width: 32.5%;
    }
    p {
      margin-left: 10px;
      .home-item-title {
        position: absolute;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        top: 0;
        left: 34%;
        width: 66%;
        font-size: 15px;
      }
      .tab-bg-1 {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #ccc;
        font-size: 12px;
      }
      .tab-bg-2 {
        background: $theme;
        color: #fff;
        font-size: 12px;
        padding: 3px 10px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        border-radius: 4px;
        margin-left: 5px;
      }
    }
  }
  .top-ske {
    margin-bottom: 20px;
    :deep(.van-skeleton__title) {
      width: 100%;
    }
    :deep(.van-skeleton__row:nth-child(2)),
    :deep(.van-skeleton__row:nth-child(3)),
    :deep(.van-skeleton__row:nth-child(4)) {
      width: 29% !important;
      height: 100px;
      float: left;
      margin: 0;
      position: relative;
      top: 10px;
      left: 0;
      // padding: 0 5px;
    }
    :deep(.van-skeleton__row:nth-child(3)) {
      margin: 0 6.3%;
    }
  }
}
.no-msg {
  padding-top: 50px;
  min-height: 500px;
  .van-icon {
    font-size: 100px;
    color: #ccc;
  }
  .van-icon,
  .van-icon:before {
    display: block;
    text-align: center;
  }
  p {
    color: #ccc;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
  }
}
</style>
